<template>
	<div class="user-detail">
		<el-drawer v-model="drawerShow" :direction="direction" :destroy-on-close='true' :before-close='cancelClick'>
			<template #header>
				<h4>{{id?'编辑成员':'添加成员'}}</h4>
			</template>
			<template #default>
				<el-form ref="formRef" :model="formData" :rules="rules" label-position="top" label-width="120px"
					class="user-form" :size="formSize">
					<el-form-item label="公司" prop="company">
						<el-input v-model="formData.company" placeholder="请输入公司名称" style="width: 100%;"></el-input>
					</el-form-item>
					<el-form-item label="联系人" prop="user">
						<el-input v-model="formData.user" placeholder="请输入联系人" style="width: 100%;"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" prop="phone">
						<el-input v-model="formData.phone" placeholder="请输入联系电话" style="width: 100%;"></el-input>
					</el-form-item>
					<el-form-item label="账号" prop="account">
						<el-input v-model="formData.account" placeholder="请输入账号" style="width: 100%;"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="formData.password" placeholder="请输入密码" style="width: 100%;"></el-input>
					</el-form-item>
					<el-form-item label="类型" prop="type">
						<el-select v-model="formData.type" placeholder="请选择类型" style="width: 100%;">
							<el-option label="付费购买" value="付费购买" />
							<el-option label="免费体验" value="免费体验" />
						</el-select>
					</el-form-item>
					<el-form-item label="使用时长">
						<div class="flexrbc append-container">
							<el-input v-model="formData.year" placeholder="年">
								<template #append>年</template>
							</el-input>
							<el-input v-model="formData.month" placeholder="月">
								<template #append>月</template>
							</el-input>
							<el-input v-model="formData.day" placeholder="日">
								<template #append>日</template>
							</el-input>
						</div>
					</el-form-item>
					<el-form-item label="备注">
						<el-input v-model="formData.remark" placeholder="请输入备注" style="width: 100%;"></el-input>
					</el-form-item>
				</el-form>
			</template>
			<template #footer>
				<div style="flex: auto">
					<el-button color="#333"  style=" padding: 8px 26px;border: 1px solid #999999;"
						@click="cancelClick">取消</el-button>
					<el-button color="#006eff" style="padding: 8px 26px;" @click="confirmClick(formRef)">确定</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script lang="ts" setup>
	import {
		ref, reactive, defineExpose
	} from "vue";
	import type {
		ElForm 
	} from 'element-plus' 
	// import { defineProps,defineEmits } from 'vue';
	const props = defineProps({
		id: {
			type: String,
			default: ''
		},
		drawerShow: {
			type: Boolean,
			default: false
		},
	})
	let $emit = defineEmits(["confirm", "cancel" ])
	// 抽屉组件方向
	const direction = ref('rtl');
	// 表单事件开始
	type FormInstance = InstanceType<typeof ElForm>

	const formSize = ref('')
	const formRef = ref<FormInstance>()
	const formData = reactive({
		company: '',
		user: '',
		phone: '',
		account: '',
		password: '',
		type: '',
		year: '',
		month: '',
		day: '',
		remark: ''
	})
	const rules = reactive({
		company: [{
			required: true,
			message: '请输入公司名称',
			trigger: 'blur',
		}],
		user: [{
			required: true,
			message: '请输入联系人',
			trigger: 'blur',
		}],
		phone: [{
			required: true,
			message: '请输入联系电话',
			trigger: 'blur',
		}],
		account: [{
			required: true,
			message: '请输入账号',
			trigger: 'blur',
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: 'blur',
		}],
		type: [{
			required: true,
			message: '请选择类型',
			trigger: 'blur',
		}],
	})
	//抽屉关闭事件
	const cancelClick = () => {
		$emit(`cancel`, '')
	};
	// watch(() => props.drawerShow, val => {
	//     console.log(val, 'deep watcher')
	// }, { deep: true })
	// 表单提交事件 
	const confirmClick = (formEl : FormInstance | undefined) => {
		if (!formEl) return
		formEl.validate((valid) => {
			if (valid) {
				// console.log(props.id,'props.id----1')
				$emit(`confirm`, props.id,formData)
			} else {
				console.log('error submit!')
				return false
			}
		})
	}
	// 表单事件结束
	defineExpose({
		cancelClick, confirmClick,
	})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">  
	
	.user-detail {
		.el-form-item--default {
			margin-bottom: 24px;

			.el-form-item__content {
				line-height: 40px !important;
				height: 40px !important;
			}

			.el-form-item__error {
				line-height: 24px;
			}
		}

		.el-form-item.is-error {
			.el-input__wrapper {
				// box-shadow:0 0 0 1px #fff !important;
			}
		}

		.el-overlay {
			background-color: rgba(235, 235, 235, 0.1) !important;
		}

		.el-drawer {
			background-color: #000 !important;
			width: 40% !important;

			.el-drawer__header {
				color: #fff !important;
				margin-bottom: 20px !important;
			}
			 
			.el-drawer__footer {
				background: #2e2e2e;
				padding: 24px !important;
			}

			.el-form-item__label {
				color: #fff !important;
			}
		
			.el-input__inner {
				color: #fff !important;
			}
			.el-input__wrapper {
				background: #000 !important;
			}

			.el-input {
				line-height: 40px !important;
				height: 40px !important;
				border-color: #797979 !important;
				--el-input-hover-border: #797979 !important;
				--el-input-focus-border: #ffffff !important;
				--el-input-focus-border-color: #ffffff !important;
				--el-input-border-color: #797979 !important;
				--el-input-bg-color: #000 !important;
				--el-select-input-focus-border-color:#fff !important;
			}

			.el-input-group__append {
				padding: 0 10px;
				background-color: rgb(70, 70, 70) !important;
				border-radius: 0 !important;
				border: none !important;
			}

			.el-input-group--append {
				border-right: 0px !important;

				.el-input__wrapper {
					border-right: 0px !important;
				}
			}

			.append-container {
				width: 100%;
				.el-input{
					width: calc(100% / 3);
				}

				.el-input:nth-child(2) {
					border-left: none !important;
					border-right: none !important;

					.el-input__wrapper {
						border-radius: 0px !important;
					}
				}

				.el-input:nth-child(3) {
					border-left: none !important;
					border-top-right-radius: 4px !important;
					border-bottom-right-radius: 4px !important;
					overflow: hidden;

					.el-input__wrapper {
						border-top-left-radius: 0px !important;
						border-bottom-left-radius: 0px !important;
					}
				}
			}
		}
	}
</style>